<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <!-- <link rel="stylesheet" href="css/detali.css" /> -->
    <title>Document</title>
    <style>
      .arr img {
        width: 30px;
        margin-right: 10px;
      }
      .arr {
        height: 450px;
        width: 1000px;
        margin: 0 auto;
        /* padding-left: 100px; */
      }
      .arr li {
        display: flex;
        height: 30px;
        padding: 10px 0;
        line-height: 30px;
      }
      .arr li p {
        margin: 0 5px;
      }
      input:nth-of-type(3) {
        text-align: center;
      }
      b {
        width: 30px;
        text-align: center;
        display: inline-block;
        border: 1px solid #000;
        margin-left: 10px;
        font-size: 12px;
        background-color: red;
        cursor: pointer;
      }
      .ind {
        position: absolute;
        top: 100px;
        right: 20%;
      }
      .ck {
        margin-top: 10px;
        margin-right: 10px;
      }
      .xuanzhe {
        margin: 0 auto;
        width: 1000px;
        height: 50px;
        /* background-color: aqua; */
      }
    </style>
  </head>
  <body>
    <div class="top_bar">
      <div class="wrapper">
        <div class="client-enter">
          <a class="omg sj" href="">手机客户端</a>
          <div class="client-enter-body">
            <h3 class="omg"></h3>
            <div class="clearfix">
              <img src="img/4.png" alt="" />
              <h4>中关村在线客户端</h4>
              <div class="client-btns">
                <a class="" href=""><b class="omg cv"></b>Android版</a>
                <a class="omg ca" href="">iPhone版</a>
              </div>
            </div>
          </div>
        </div>
        <a class="ps" href="">产品报价</a>
        <a class="ps op" href="">产品入库<i class="ss os"></i></a>
        <a class="ps" href="">商家库推广</a>
        <a class="ps" href="">广告推广</a>
        <div class="ic">
          <span class="register">购物</span><span id="tui"></span>
          <a class="omg ss wb"></a>
          <a class="omg ss qq"></a>
          <a class="omg ss wx"></a>
        </div>
      </div>
    </div>

    <div class="xuanzhe">
      <input type="checkbox" id="checkAll" />全选
      <p>总价：<span class="qian">0</span></p>
    </div>

    <div>
      <ul class="arr"></ul>
    </div>

    <a class="ind" href="index.html">回到主页</a>
    <div class="bottom">
      <div class="bottom-center">
        <div class="bottom-center-top">
          <p>
            <strong>全国渠道代表：</strong><a href="">西安站</a>|<a href=""
              >成都站</a
            >|<a href="">河北站</a>|<a href="">山西站</a>|<a href="">河南站</a
            >|<a href="">云南站</a>|<a href="">福建站</a>|<a href="">南宁站</a
            >|<a href="">天津站</a>|<a href="">更多</a>
          </p>
          <p>
            <strong>代理招募热线：</strong>
            <a href=""> 孟女士 010-83417888-9918</a>
          </p>
        </div>
        <div class="bottom-center-center" style="height: 105px">
          <ul>
            <h4>关于我们</h4>
            <li style="padding-top: 3px"><a href="">公司简介</a></li>
            <li><a href="">法律声明</a></li>
            <li><a href="">招聘信息</a></li>
          </ul>
          <ul>
            <h4>加盟合作</h4>
            <li style="padding-top: 3px"><a href="">媒体合作</a></li>
            <li><a href="">品牌大全</a></li>
            <li><a href="">联系方式</a></li>
          </ul>
          <ul>
            <h4>营销服务</h4>
            <li style="padding-top: 3px"><a href="">营销推广</a></li>
            <li><a href="">法律声明</a></li>
            <li><a href="">网商通</a></li>
          </ul>
          <ul>
            <h4>用户中心</h4>
            <li style="padding-top: 3px"><a href="">帐号注册</a></li>
            <li><a href="">站点地图</a></li>
            <li><a href="">反馈纠错</a></li>
          </ul>
          <ul>
            <h4>关注我们</h4>
            <li style="padding-top: 3px"><a href="">微信关注</a></li>
            <li><a href="">微博关注</a></li>
            <li><a href="">头条关注</a></li>
          </ul>
          <ul>
            <h4>客户端下载</h4>
            <img src="img/010.png" alt="" />
          </ul>
          <ul>
            <h4>关注公众号</h4>
            <img src="img/028.jpg" alt="" />
          </ul>
        </div>
        <div class="bottom-center-botton">
          <ul>
            <li><img src="img/029.jpg" alt="" /></li>
            <li><img src="img/011.png" alt="" /></li>
            <li><img src="img/012.png" alt="" /></li>
            <li><img src="img/030.jpg" alt="" /></li>
          </ul>
        </div>
        <div class="lastts">
          <p>
            <a href="">京B2-20200543</a>&nbsp;
            <a href="">京ICP备14061128号</a>&nbsp;
            <a href="">京公网安备11010802020026号</a>&nbsp;
            <a href="">网络文化经营许可证京网文[2020]5356-1048</a>&nbsp;
            <a href="">（京）网药械信息备字（2022）第00054号</a>
          </p>
          <p>
            <a href="">未成年人家长监护</a>&nbsp;<a href="">风险监测</a>&nbsp;
            <span>违法和不良信息举报电话：010-64218167</span>&nbsp;
            <span>举报邮箱：jubao@zol.com.cn</span>&nbsp;
            <span>北京知行锐景科技有限公司</span>&nbsp;<span>版权所有</span>
          </p>
          <p>
            <span>北京市东城区和平里东街11号航星科技园航星3号楼5层</span>&nbsp;
            <a href="">京演(机构) (2022) 5175号</a>&nbsp;
            <a href="" style="color: red">网站经营者信息公示</a>&nbsp;
            <a href="" style="color: red">经营者履行社会责任公示信息</a>&nbsp;
          </p>
          <p><a href="">广播电视节目制作经营许可证号（京）字第08010号</a></p>
        </div>
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>
    <script>
      axios
        .get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
          params: {
            id: localStorage.getItem("uid"),
          },
        })
        .then((resData) => {
          let data = resData.data.data;
          console.log(data);
          let str = "";
          data.forEach((item) => {
            str += `
                  <li data-id="${item.pid}">
                  <input type="checkbox" class="ck">
                  <img src="${item.pimg}">
                  <span>JD</span>
                  <p>名称:${item.pname}</p>
                  <p style="color: red;">价格：￥<span class="danjia">${
                    item.pprice
                  }</soan></p>
                  <p>介绍：${item.pdesc}</p>
                  <input type="button" class="jian" value=" - " />
                  <input type="text" class="num" value=${item.pnum}>
                  <input type="button" class="jia" value=" + " />
                  <input type="button" class="btn" value="确认购买">
                  <p>总价：<span class="jiage">${
                    item.pprice * item.pnum
                  }</span></p>
                  <b>删除</b>
                  </li>
                  `;
          });
          $(".arr").html(str);
          // $(".btn").click(function () {
          //   location.reload();
          // });

          $("b").click(function () {
            axios
              .get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
                params: {
                  uid: localStorage.getItem("uid"),
                  pid: $(this).parent().attr("data-id"),
                },
              })
              .then((resData) => {
                console.log(resData.data);
              });
            $(this).parent().remove();
          });

          $(".jian").click(function () {
            var res = Number($(this).next().val());
            if (res <= 1) {
              // res = 1;
              return false;
            }
            $(this)
              .next()
              .val(res * 1 - 1);
            // let znn = $(this).find(".jiage").text(res*${item.pprice});
            let agu = Number($(this).parent().find(".danjia").text());
            // console.log(agu);
            $(this)
              .parent()
              .find(".jiage")
              .text((res - 1) * agu);

            axios
              .get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                params: {
                  uid: localStorage.getItem("uid"),
                  pid: $(this).parent().attr("data-id"),
                  pnum: Number($(this).next().val()),
                },
              })
              .then((resData) => {
                console.log(resData.data);
              });
          });

          $(".jia").click(function () {
            var res = Number($(this).prev().val());
            let agu = Number($(this).parent().find(".danjia").text());
            $(this)
              .prev()
              .val(res * 1 + 1);
            $(this)
              .parent()
              .find(".jiage")
              .text((res + 1) * agu);
            axios
              .get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                params: {
                  uid: localStorage.getItem("uid"),
                  pid: $(this).parent().attr("data-id"),
                  pnum: Number($(this).prev().val()),
                },
              })
              .then((resDat) => {
                console.log(resData.data);
              });
          });

          $(".num").change(function () {
            let agu = Number($(this).parent().find(".danjia").text());
            axios
              .get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                params: {
                  uid: localStorage.getItem("uid"),
                  pid: $(this).parent().attr("data-id"),
                  pnum: Number($(this).val()),
                },
              })
              .then((resDat) => {
                console.log(resData.data);
                var res = Number($(this).val());
                console.log(res);
                $(this)
                  .parent()
                  .find(".jiage")
                  .text(res * agu);
              });
          });
          //全选按钮
          $("#checkAll").click(function () {
            $(".ck").prop("checked", $(this).prop("checked"));
            // console.log($(this).prop("checked"));
          });
          // 其他按钮
          $(".ck").click(function () {
            if ($(".ck:checked").length === $(".ck").length) {
              $("#checkAll").prop("checked", true);
            } else {
              $("#checkAll").prop("checked", false);
            }
            let sum = 0;
            if ($(".ck:checked")) {
              sum += Number($(".jiage").text());
            }
            $(".qian").text(sum);
            if (($(".ck:checked").length = 0)) {
              let sum = 0;
            }
          });
        });
    </script>
  </body>
</html>
